
let container = document.querySelector('.container')

function fn1() {

    let navList = document.querySelector('#nav .navList')
    let el2 = ""
    let l = 0

    fetch('http://chst.vip:1234/api/getbaicaijiatitle?pageid=1')
        .then(body => body.json())
        .then(res => {
            //console.log(res)
            res.result.forEach(item => {
                el2 += `<li id='${l++}'>${item.title}</li>`
            })
            navList.innerHTML = el2;

            fetch(`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=0`)
                .then(body => body.json())
                .then(res => {
                    let el2 = ""
                    //console.log(res.result)
                    res.result.forEach(item => {
                        el2 += `<li id=${item.productId}>
                        <a href="" class="im">
                        <div class="img fl">
                        ${item.productImg}
                        </div>
                        <div class="infoR">
                            <div class="title">
                                <h4>${item.productName}</h4>
                                <div class="price">
                                ${item.productPrice}
                                </div>
                                </div>
                            <div class="down">
                                <div class="bar">
                                <div class="bar_in" style="width: 118px;">100%</div>
                                </div>
                                <span class="yiling">已领0/剩余72</span>
                                <div class="click">
                                <div class="left">
                                点此领取优惠券
                                </div>
                                <div class="right">
                                下单链接
                                </div>
                            </div>
                            </div>
                        </div>
                        </a>
                        </li> 
                        `
                    })
                    //console.log(this)
                    $('#product .info').html(el2)
                })

            fn2()
        })
}
function fn2() {

    $('#nav .navList').on('click', 'li', function () {
        //console.log(123456)
        //console.log(this)
        //console.log($(this).attr("id"))
        $(this).css('color', 'orangered').siblings().css('color', 'black')
        fetch(`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${$(this).attr("id")}`)
            .then(body => body.json())
            .then(res => {
                let el2 = ""
                //console.log(res.result)
                res.result.forEach(item => {
                    el2 += `<li id=${item.productId}>
                    <a href="" class="im">
                    <div class="img fl">
                    ${item.productImg}
                    </div>
                    <div class="infoR">
                        <div class="title">
                            <h4>${item.productName}</h4>
                            <div class="price">
                            ${item.productPrice}
                            </div>
                            </div>
                        <div class="down">
                            <div class="bar">
                            <div class="bar_in" style="width: 118px;">100%</div>
                            </div>
                            <span class="yiling">已领0/剩余72</span>
                            <div class="click">
                            <div class="left">
                            点此领取优惠券
                            </div>
                            <div class="right">
                            下单链接
                            </div>
                        </div>
                        </div>
                    </div>
                    </a>
                    </li> 
                    `
                })
                //console.log(this)
                $('#product .info').html(el2)
            })

    })
}

fn1()